<template>
    <div class="invite">
        <div class="i-tip" style="font-weight: 600">{{ $t("message.Gotten.a") }}</div>
        <VRow no-gutters class="had c-title-5 c-clor">
            <VCol v-for="item in titles" :cols="item.flex">{{ item.label }}</VCol>
        </VRow>
        <VRow class="c-title-5 bdy" no-gutters v-for="item in filterList" :key="item.id">
            <VCol cols="4">{{ DAY.getVal(item.action) }}</VCol>
            <VCol cols="4">{{ formatTimestamp(item.createTime) }}</VCol>
            <VCol cols="4">{{ Number(item.amount / 100).toFixed(2) }}</VCol>
        </VRow>
        <v-pagination v-show="pages > 1" :length="pages" :total-visible="3" v-model="idx"></v-pagination>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { formatTimestamp } from "@/comm/format";
import i18n from "@/locals";
import { filterList, getData, pages, idx } from "./script/gotten";
watch(idx, () => {
    getData();
});
onMounted(async () => {
    await getData();
})
const DAY = {
    SIGN_IN_FIRST: i18n.global.t('message.Week_.d'),
    SIGN_IN_SECOND: i18n.global.t('message.Week_.d'),
    SIGN_IN_THIRD: i18n.global.t('message.Week_.d'),
    SIGN_IN_FOURTH: i18n.global.t('message.Week_.d'),
    SIGN_IN_FIFTH: i18n.global.t('message.Week_.d'),
    SIGN_IN_SIXTH: i18n.global.t('message.Week_.d'),
    SIGN_IN_SEVENTH: i18n.global.t('message.Week_.d'),
    SUBSCRIBE_CHANNEL: i18n.global.t('message.Week_.dd'),
    REGISTER_COMPLETE: i18n.global.t('message.Week_.c'),

    TWITTER_FOLLOWERS_REWARD: i18n.global.t('message.Week_.twr'),
    TELEGRAM_FOLLOWERS_REWARD: i18n.global.t('message.Week_.tgr'),

    VIEW_SMART: i18n.global.t('message.Week_.a'),
    INVITE_FIRST_REWARD: i18n.global.t('message.Week_.b'),
    INVITE_SECOND_REWARD: i18n.global.t('message.Week_.b'),
    INVITE_THIRD_REWARD: i18n.global.t('message.Week_.b'),
    INVITE_FOURTH_REWARD: i18n.global.t('message.Week_.b'),
    REGISTER_ACTIVITY_REWARDS: i18n.global.t("message.MAP_MISSION.e"),
    getVal: function (key: string): any {
        //@ts-ignore
        return DAY[key];
    }
}
const titles = ref([
    { label: i18n.global.t("message.Gotten.table.a"), prop: "action", flex: 4 },
    { label: i18n.global.t("message.Gotten.table.b"), prop: "createTime", flex: 4 },
    { label: i18n.global.t("message.Gotten.table.c"), prop: "amount", flex: 4 }
]);
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
